<template>
  <border-box>
    <dv-card>
      <template v-slot:header>
        <dv-title-1> 五大会战 </dv-title-1>
      </template>
      <div class="dv-card-content">
        <div>
          <dv-card
            class="mb-5"
            style="width: 444px; height: 135px; grid-template-rows: 45px auto"
            :card-bg="require('@/assets/5dhz/1bj.png')"
          >
            <template #header>
              <dv-title2>平台大会战</dv-title2>
            </template>
            <div :style="{ padding: '10px 0 0 20px' }">
              <Progress
                v-for="(v, i) in progressData"
                :key="i"
                :name="v.name"
                :value="v.value"
                :unit="v.unit"
                :max="v.max"
                valueColor="#26DFFE"
                :round="true"
                border="1px solid #0EFCFF"
                :area="true"
                style="color: #fff"
              />
            </div>
          </dv-card>
          <dv-card
            class="mb-5"
            style="width: 444px; height: 235px"
            :card-bg="require('@/assets/5dhz/4bj.png')"
            sub
          >
            <template #header>
              <dv-title2>城市品质提升大会战</dv-title2>
            </template>
            <div class="content">
              <div class="cityData">
                <number-unit-img
                  v-for="(item, index) in cityData"
                  :key="index"
                  :value="item.value"
                  :icon="item.icon"
                  :unit="item.unit"
                />
              </div>
              <proportion :source="proportionData" style="color: #fff" />
            </div>
          </dv-card>
          <dv-card
            style="width: 444px; height: 193px"
            :card-bg="require('@/assets/5dhz/2bj.png')"
          >
            <template #header>
              <dv-title2>现代治理大会战</dv-title2>
            </template>
            <div :style="{ padding: '10px 0 0 20px', marginTop: '-30px' }">
              <div style="text-align: center; color: #fff">
                信访总量历年趋势
              </div>
              <radar
                eleId="xdzl"
                :background="false"
                width="450"
                height="130"
                :color="['#00A1FF', '#5CE0E2']"
                :round="false"
                :area="false"
                :source="source"
              />
            </div>
          </dv-card>
        </div>
        <div>
          <dv-card
            style="width: 444px; height: 380px"
            :card-bg="require('@/assets/5dhz/4bj.png')"
            sub
          >
            <template #header>
              <dv-title2>综合交通大会战</dv-title2>
            </template>
            <div class="zhjtContent" :style="{ padding: '10px 0 0 20px' }">
              <Image
                :src="require('@/assets/components/654333/a2.png')"
                width="420"
              ></Image>
              <radar
                eleId="bar5"
                title="新开综合交通建设项目"
                :legend="true"
                width="410"
                height="190"
                :background="false"
                :color="['#00A1FF', '#5CE0E2']"
                :round="false"
                :area="true"
              ></radar>
            </div>
          </dv-card>
          <dv-card
            style="width: 444px; height: 193px"
            :card-bg="require('@/assets/5dhz/2bj.png')"
          >
            <template #header>
              <dv-title2>生态环境改善大会战</dv-title2>
            </template>
            <Image
              :src="require('@/assets/components/654333/a3.png')"
              width="440"
            ></Image>
          </dv-card>
        </div>
      </div>
    </dv-card>
  </border-box>
</template>

<script>
import DvCard from "@/components/DvCard/index.vue";
import DvTitle1 from "@/components/DvTitle1";
import BorderBox from "@/components/BorderBox1";
import DvTitle2 from "@/components/DvTitle2.vue";
import Progress from "@/components/charts/Progress.vue";
import Proportion from "@/components/charts/Proportion.vue";
import NumberUnitImg from "@/components/NumberUnitImg";
import Radar from "@/components/charts/Bar";
import Image from "@/components/Image";
export default {
  name: "FiveWar",
  components: {
    Radar,
    NumberUnitImg,
    DvTitle2,
    DvTitle1,
    DvCard,
    BorderBox,
    Progress,
    Proportion,
    Image,
  },
  data() {
    return {
      bar5: {
        name: ["20以下", "21-30", "31-40", "41-50", "51-60", "60以上"],
        series: [
          { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "男" },
          { data: [23, 42, 51, 25, 32, 38], type: "line", name: "女" },
        ],
      },
      source: {
        name: ["2016", "2017", "2018", "2019", "2020"],
        series: [
          // { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "男" },
          // { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "女" },
          {
            data: [20, 30, 25, 34, 18],
            type: "line",
            name: "总数",
            color: "#06B3D6",
          },
          {
            data: [22, 28, 26, 30, 25],
            type: "line",
            name: "总数",
            color: "#FFCC00",
          },
        ],
      },
      progressData: [
        { name: "招商引资", value: "300", unit: "亿元", max: "350" },
        {
          name: "政府及国企投资重大项目",
          value: "175",
          unit: "亿元",
          max: "220",
        },
      ],
      proportionData: [
        { name: "六石镇", value: "740", unit: "" },
        { name: "画水镇", value: "740", unit: "" },
        { name: "六石镇", value: "740", unit: "" },
        { name: "画水镇", value: "740", unit: "" },
      ],
      cityData: [
        { value: "17", unit: "个", icon: require("@/assets/5dhz/lyxq.png") },
        { value: "7", unit: "个", icon: require("@/assets/5dhz/dtl.png") },
        { value: "16", unit: "个", icon: require("@/assets/5dhz/hdgg.png") },
        { value: "5", unit: "个", icon: require("@/assets/5dhz/nfjj.png") },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.dv-card-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cityData {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
</style>
